<template>
  <div class="contain">
    <el-select
    v-model="search"
    filterable
    remote
    placeholder="输入企业名称/代码"
    :remote-method="querySearch"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" class="search-icon">搜索</el-button>
  </div>
</template>

<script>
export default {
    name:"SearchBoard ",
    data() {
      return {
        options: [],
        search: '',
        list: [],
        loading: false
      }
    },
    mounted () {
      ;
    },
    methods: {
      change(val) {
          this.search = ''
          this.options = [];
      },
      querySearch(query){
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            // this.options = this.list.filter(item => {
            //   return item.label.toLowerCase()
            //     .indexOf(query.toLowerCase()) > -1;
            // });
          }, 200);
        } else {
          this.options = [];
        }
      }
    },
}
</script>

<style scoped>
.contain{
  display: flex;
  justify-content: space-around;
}
.search-icon{
  margin-left: 30px;
}
/deep/.el-select{
  width: 250px;
}
</style>